<!-- 审批流程 -->
<template>
  <section class="flow-approve-box">
    <!-- 检索条件 -->
    <div class="flow-content">
      <div class="search-box">
        <div class="search-segment" style="flex: 1">
          <!-- <a-input v-model="query.name" :max-length="16" allow-clear long placeholder="流程名称" /> -->
          <a-input-search
            v-model="query.condition.name"
            :max-length="16"
            allow-clear
            placeholder="流程名称"
            search-button
            :button-props="{ type: 'secondary' }"
            @press-enter="onSearch()"
            @search="onSearch()"
          >
            <template #button-icon><icon-search /></template>
          </a-input-search>
        </div>
        <!-- <div class="search-segment">
          <a-tooltip content="搜索">
            <a-button @click="onSearch()"> <icon-search /> </a-button>
          </a-tooltip>
        </div> -->
        <div class="search-segment">
          <a-tooltip content="重置">
            <a-button @click="onSearchReset()"> <icon-refresh /> </a-button>
          </a-tooltip>
        </div>
        <div class="search-segment">
          <a-popover
            position="rt"
            trigger="click"
            :show-arrow="false"
            class="flow-search-more-popover"
            animation-name="slide-fade"
          >
            <a-button> <icon-filter /> </a-button>
            <template #content>
              <!-- 更多检索条件 -->
              <div class="search-more-title">高级筛选</div>
              <div class="search-more-box">
                <a-select
                  v-model:model-value="query.condition.creator"
                  allow-clear
                  allow-search
                  placeholder="发起人"
                >
                  <a-option
                    v-for="user in users"
                    :value="user.id"
                    :label="user.name"
                  />
                </a-select>
                <!-- <a-select
                  class="column"
                  v-model:model-value="query.condition.groupId"
                  allow-clear
                  placeholder="流程分组"
                >
                  <a-option
                    v-for="group in groups"
                    :value="group.id"
                    :label="group.name"
                  />
                </a-select> -->
                <a-select
                  class="column"
                  v-model:model-value="query.condition.instanceStatus"
                  allow-clear
                  placeholder="流程状态"
                  @clear="() => delete query.condition.instanceStatus"
                >
                  <a-option
                    v-for="status in STATUS_LIST"
                    :value="status.value"
                    :label="status.name"
                  />
                </a-select>
                <a-range-picker
                  v-model:model-value="flowBeginTime"
                  :placeholder="['最小提交时间', '最大提交时间']"
                  allow-clear
                  show-time
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :time-picker-props="{
                    defaultValue: ['00:00:00', '00:00:00'],
                  }"
                  @change="onBeginTimeChanged"
                />
              </div>
              <div class="search-more-action">
                <a-button @click="onSearchReset()"> 重置 </a-button>
                <a-button type="primary" @click="onSearch()"> 检索 </a-button>
              </div>
            </template>
          </a-popover>
        </div>
      </div>

      <!-- 流程列表 -->
      <div class="flow-list-box">
        <div class="empty-box" v-if="flowInsts.length == 0">
          <a-empty></a-empty>
        </div>
        <div
          v-else
          :class="[
            'item-box',
            selectedFlow.id == inst.id ? 'item-box-choosed' : '',
          ]"
          v-for="inst in flowInsts"
          @click="onFlowInstClicked(inst)"
        >
          <FlowCard :flow-inst="inst"></FlowCard>
        </div>
        <RollLoading
          @on-scroll="loadFlowInsts()"
          :has-more="haveMore"
        ></RollLoading>
      </div>
    </div>

    <!-- 流程详情 -->
    <div class="flow-detail-content">
      <flow-detail
        :flow-inst="selectedFlow"
        :cancelable="false"
        :actionable="false"
      />
    </div>
  </section>
</template>

<script setup>
import { computed, onBeforeMount, ref } from "vue";
import { useOrganStore } from "@/stores";
import FlowInstApi from "@/api/FlowInstApi";
import FlowManApi from "@/api/FlowManApi";
import OrganApi from "@/api/OrganApi";
import { STATUS_LIST } from "@/components/flow/common/FlowConstant";
import {
  IconFilter,
  IconRefresh,
  IconSearch,
} from "@arco-design/web-vue/es/icon";
import RollLoading from "@/components/common/RollLoading.vue";
import FlowCard from "./flow-card.vue";
import FlowDetail from "./flow-detail.vue";

let organStore = useOrganStore();
let users = computed(() => organStore.users);
let groups = ref([]);

let query = ref({
  pageIndex: 0,
  pageSize: 10,
  total: 0,
  condition: { taskStatus: "FINISH" },
  orderBy: [{ desc: true, orderBy: "createTime" }],
});
let flowInsts = ref([]);
let flowBeginTime = ref([]);
let flowEndTime = ref([]);
let selectedFlow = ref({});
const haveMore = ref(true); // 无限加载, 是否存在更多的数据

const onBeginTimeChanged = (dateString) => {
  if (dateString && dateString.length == 2) {
    query.value.condition.startTime = dateString[0];
    query.value.condition.endTime = dateString[1];
  } else {
    delete query.value.condition.startTime;
    delete query.value.condition.endTime;
  }
};

const onSearch = () => {
  query.value.pageIndex = 0;
  flowInsts.value = [];
  haveMore.value = true;
};

const onSearchReset = () => {
  query.value = {
    pageIndex: 0,
    pageSize: 10,
    total: 0,
    condition: { taskStatus: "FINISH" },
    orderBy: [{ desc: true, orderBy: "createTime" }],
  };
  flowBeginTime.value = null;
  flowEndTime.value = null;
  flowInsts.value = [];
  haveMore.value = true;
};

const loadFlowInsts = () => {
  query.value.pageIndex++;
  FlowInstApi.pageHistoryTasks(query.value).then((resp) => {
    if (resp.code == 0) {
      let { list, total } = resp.data;
      flowInsts.value.push(...(list || []));
      query.value.total = total;
      if (flowInsts.value.length >= total) {
        haveMore.value = false;
      }
    }
  });
};

const onFlowInstClicked = (inst) => {
  selectedFlow.value = inst;
};

const loadFlowGroups = () => {
  FlowManApi.listGroups({}).then((resp) => {
    if (resp.code == 0) {
      groups.value = resp.data.records || [];
    }
  });
};

onBeforeMount(() => {
  // OrganApi.loadOrgan();
  // loadFlowGroups();
});
</script>

<style lang="less">
@import "./flow-base.less";
</style>
